﻿@page "/"
@using BootstrapBlazor.Components
@using Application.Web.Entry.Pages.Components
@using System.Timers
@attribute [TabItemOption(Text = "设备监控")]
@inject IJSRuntime JS

<PageTitle>设备监控系统</PageTitle>

<div id="div_main" style="max-height:100%; overflow: hidden;">
    <Row ItemsPerRow="ItemsPerRow.Twelve">
        <Row ColSpan="10">
            <Row ItemsPerRow="ItemsPerRow.Six">
                <Row ColSpan="4">
                    <Row ItemsPerRow="ItemsPerRow.Four">
                        <!-- 实时角度 -->
                        <Row ColSpan="2" >
                            <AnnAngleView CurrentTime="@CurrentTime" 
                                            AzimuthGuide="@AzimuthGuide" 
                                            ElevationGuide="@ElevationGuide" 
                                            AzimuthCurrent="@AzimuthCurrent" 
                                            ElevationCurrent="@ElevationCurrent" 
                                            OffsetA="@OffsetA" 
                                            OffsetE="@OffsetE" 
                                            AzimuthCommand="@AzimuthCommand" 
                                            ElevationCommand="@ElevationCommand" 
                                            TiltCommand="@TiltCommand" 
                                            TiltCurrent="@TiltCurrent" 
                                            AzimuthSpeed="@AzimuthSpeed" 
                                            ElevationSpeed="@ElevationSpeed" 
                                            TiltSpeed="@TiltSpeed" />
                        </Row>
                        <!-- 实时AGC -->
                        <Row ColSpan="2">
                            <AnnAngleView CurrentTime="@CurrentTime" 
                                            AzimuthGuide="@AzimuthGuide" 
                                            ElevationGuide="@ElevationGuide" 
                                            AzimuthCurrent="@AzimuthCurrent" 
                                            ElevationCurrent="@ElevationCurrent" 
                                            OffsetA="@OffsetA" 
                                            OffsetE="@OffsetE" 
                                            AzimuthCommand="@AzimuthCommand" 
                                            ElevationCommand="@ElevationCommand" 
                                            TiltCommand="@TiltCommand" 
                                            TiltCurrent="@TiltCurrent" 
                                            AzimuthSpeed="@AzimuthSpeed" 
                                            ElevationSpeed="@ElevationSpeed" 
                                            TiltSpeed="@TiltSpeed" />
                        </Row>
                    </Row>

                    <Row ItemsPerRow="ItemsPerRow.Four">
                        <!-- 跟踪策略与校相 -->
                        <Row ColSpan="2">
                            <div style="height:100px;background-color:green"></div>
                        </Row>
                        <!-- 监控方式与工作模式 -->
                        <Row ColSpan="2">
                            <div style="height:100px;background-color:yellow"></div>
                        </Row>
                    </Row>

                    <Row ItemsPerRow="ItemsPerRow.Four">
                        <Row ColSpan="2">
                            <Row ItemsPerRow="ItemsPerRow.Two">
                                <!-- 信号源切换 -->
                                <Row ColSpan="2">
                                    <div style="height:100px;background-color:yellow"></div>
                                </Row>
                            <Row ItemsPerRow="ItemsPerRow.Two">
                            </Row>
                                <!-- 参数设置 -->
                                <Row ColSpan="2">
                                    <div style="height:300px;background-color:blue"></div>
                                </Row>
                            </Row>
                        </Row>
                        <!-- 手动偏置 -->
                        <Row ColSpan="2">
                            <div style="height:430px;background-color:green"></div>
                        </Row>
                    </Row>

                    <Row ItemsPerRow="ItemsPerRow.Four">
                        <!-- 功能开关区 -->
                        <Row ColSpan="4">
                            <div style="height:50px;background-color:black"></div>
                        </Row>
                    </Row>

                    <Row ItemsPerRow="ItemsPerRow.Four">
                        <!-- 功能状态区 -->
                        <Row ColSpan="4">
                            <div style="height:50px;background-color:gray"></div>
                        </Row>
                    </Row>

                    <Row ItemsPerRow="ItemsPerRow.Four">
                        <!-- 功能显示灯 -->
                        <Row ColSpan="4">
                            <div style="height:80px;background-color:yellowgreen"></div>
                        </Row>
                    </Row>
                </Row>
                
                <Row ColSpan="2">
                    <!-- 任务信息 -->
                     <Row ItemsPerRow="ItemsPerRow.One">
                        <div style="height:900px;background-color:pink"></div>
                    </Row>

                    <!-- 电流参数 -->
                    <Row ItemsPerRow="ItemsPerRow.One">
                        <div style="height:245px;background-color:red"></div>
                    </Row>
                </Row>
            </Row>

            
            
            
            @* <!-- 状态指示灯区域 - 占位符 -->
            <div class="row mt-2">
                <div class="col">
                    <div class="bg-primary text-white p-2 rounded">
                        <h4 class="font-weight-bold mb-2">状态指示灯区域 [占位符]</h4>
                        <div style="height: 50px; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
                            <span>状态指示灯模块将在此位置实现</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 状态指示灯区域 - 占位符 -->
            <div id="div_light" class="row" style="margin-top: 5px;">
                <div class="col">
                    <div class="bg-primary text-white p-2 rounded">
                        <h4 class="font-weight-bold mb-2">状态指示灯区域 [占位符]</h4>
                        <div style="height: 50px; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
                            <span>状态指示灯模块将在此位置实现</span>
                        </div>
                    </div>
                </div>
            </div> *@

        </Row>
        
        <!-- 实时日志 -->
        <Row ColSpan="2">
            <!-- 实时日志区域 - 占位符 (与页面高度一致) -->
            <div class="d-flex flex-column">
                <div class="layout-drawer-body rounded flex-grow-1">
                    <LogDrawer Height="@calculatedHeight"></LogDrawer>
                </div>
            </div>
        </Row>
    @* <div class="row">
        <!-- 
        以下 CSS 类和样式的含义：
        1. container-fluid：Bootstrap 类，创建一个宽度 100% 的容器，该容器会跨越整个视口宽度。
        2. p-2：Bootstrap 类，为元素设置内边距（padding），数值 2 表示内边距大小，遵循 Bootstrap 的间距尺度。
        3. d-flex：Bootstrap 类，将元素的显示方式设置为 flex 布局，使元素成为一个弹性容器。
        4. flex-column：Bootstrap 类，设置弹性容器内的子元素沿垂直方向（列方向）排列。
        5. style="height: 100vh"：内联样式，将元素的高度设置为视口高度（viewport height）的 100%，即元素高度与浏览器窗口高度一致。
        -->
        <div class="container-fluid p-2 d-flex flex-column">
            <!-- 主要内容区域 -->
            <div class="row flex-grow-1">
                <!-- 左侧参数显示区域 - 使用DeviceMonitor组件 -->
                <div class="col-3">
                    <DeviceMonitor CurrentTime="@CurrentTime" 
                                AzimuthGuide="@AzimuthGuide" 
                                ElevationGuide="@ElevationGuide" 
                                AzimuthCurrent="@AzimuthCurrent" 
                                ElevationCurrent="@ElevationCurrent" 
                                OffsetA="@OffsetA" 
                                OffsetE="@OffsetE" 
                                AzimuthCommand="@AzimuthCommand" 
                                ElevationCommand="@ElevationCommand" 
                                TiltCommand="@TiltCommand" 
                                TiltCurrent="@TiltCurrent" 
                                AzimuthSpeed="@AzimuthSpeed" 
                                ElevationSpeed="@ElevationSpeed" 
                                TiltSpeed="@TiltSpeed" />
                </div>

                <!-- 中间雷达显示区域 - 占位符 -->
                <div class="col-6">
                    <div class="bg-primary text-white p-2 rounded h-full">
                        <h4 class="font-weight-bold mb-2">雷达显示区域 [占位符]</h4>
                        <div style="height: 300px; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
                            <span>雷达显示模块将在此位置实现</span>
                        </div>
                    </div>
                </div>

                <!-- 右侧任务信息区域 - 占位符 -->
                <div class="col-2">
                    <div class="bg-primary text-white p-2 rounded">
                        <h4 class="font-weight-bold mb-2">任务信息区域 [占位符]</h4>
                        <div style="height: 300px; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
                            <span>任务信息模块将在此位置实现</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 
    控制按钮区域 - 占位符
    以下 CSS 类的含义：
    1. row：Bootstrap 类，用于创建一个行（row）容器，通常与 col 类配合使用，用于构建网格布局。
    2. mt-2：Bootstrap 类，为元素设置上外边距（margin-top），数值 2 表示外边距大小，遵循 Bootstrap 的间距尺度。
    -->
    <div class="row mt-2">
        <div class="col">
            <div class="bg-primary text-white p-2 rounded">
                <h4 class="font-weight-bold mb-2">控制操作区域 [占位符]</h4>
                <div style="height: 200px; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
                    <span>控制操作模块将在此位置实现</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态指示灯区域 - 占位符 -->
    <div class="row mt-2">
        <div class="col">
            <div class="bg-primary text-white p-2 rounded">
                <h4 class="font-weight-bold mb-2">状态指示灯区域 [占位符]</h4>
                <div style="height: 50px; background-color: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center;">
                    <span>状态指示灯模块将在此位置实现</span>
                </div>
            </div>
        </div>
    </div>
    


     *@
    </Row>
</div>

